<template>
  <div>
    <!-- 年度开工率 -->
    <Echart
      :options="options"
      id="lineChart"
      height="240px"
      class="line_echart"
    ></Echart>
    <!-- width="300px" -->
  </div>
</template>

<script>
import Echart from "@/common/echart";
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          title: {
            // text: "折线",
          },
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.1)",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                backgroundColor: "#7B7DDC",
              },
            },
          },
          // legend: {
          //   data: ["已贯通", "计划贯通", "贯通率"],
          //   textStyle: {
          //     color: "#B4B4B4",
          //   },
          //   top: "0%",
          // },
          grid: {
            left: "3%",
            // width: "88%",
            right: "4%",
          },
          xAxis: {
            data: newData.category,
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            // axisTick: {
            //   show: false,
            // },
            axisLabel: {
              interval: 0,
            },
          },
          yAxis: {
            show: false,
          },
          // [
          //   {
          //     splitLine: { show: false },
          //     axisLine: {
          //       lineStyle: {
          //         color: "#B4B4B4",
          //       },
          //     },

          //     axisLabel: {
          //       formatter: "{value} ",
          //     },
          //   },
          // ]
          series: [
            {
              name: "人数",
              type: "line",
              // smooth: true,
              // showAllSymbol: true,
              // symbol: "emptyCircle",
              // symbolSize: 8,
              // yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: "#F02FC2",
                },
              },
              //
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgb(238, 45, 45)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgb(163, 64, 64)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
              data: newData.lineData,
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
<style scoped>
.line_echart {
  /* margin: 5%; */
  /* color: rgb(163, 64, 64); */
}
</style>
